<script lang="ts" setup>
import { Search, User, Sunny, Moon } from "@element-plus/icons-vue";
import { ElButton, ElForm, ElFormItem, ElInput, ElLink } from "element-plus";
import { defineEmits } from "vue";
import { useThemeStore, useTokenStore } from "@/store";
import { login, postSearch } from "@/api";
const searchValue = ref("");
const router = useRouter();
const form = reactive({
  email: "",
  password: "",
});
const emits = defineEmits<{ (e: "search", val: string): void }>();
const theme = useThemeStore();
const value = ref(theme.dark);
const changeColor = () => {
  theme.changeTheme();
};
const search = () => {
  if (searchValue.value) {
    emits("search", searchValue.value);
  } else {
    ElMessage({
      message: "请先输入您要查询的标签",
    });
  }
};
const tokenStore = useTokenStore();
const logoffMe = () => {
  tokenStore.removeToken();
  router.push("/login");
};
</script>
<template>
  <header>
    <div id="logo">Picx</div>
    <div id="search" class="flex">
      <el-input
        v-model="searchValue"
        style="width: 300px"
        placeholder="Please Input"
        :suffix-icon="Search"
        @keydown.enter.prevent="search"
      />
      <el-button @click="() => emits('search', '')"><i-ep-Refresh /></el-button>
    </div>
    <el-switch
      v-model="value"
      :active-icon="Moon"
      :inactive-icon="Sunny"
      style="--el-switch-on-color: #fff; --el-switch-off-color: #000"
      @change="changeColor"
    />
    <el-dropdown>
      <span style="display: flex">
        用户中心
        <i-ep-User />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <router-link to="/login">登录</router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link to="/registry">注册</router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-button @click="logoffMe"> 退出登录 </el-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link to="/chat"> 聊天室 </router-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </header>
</template>
<style lang="scss" scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  #logo {
    font-size: 24px;
  }
}
</style>
